<template>
  <section>
    <br />
    <el-row>
      <el-button type="primary" @click="ajaxSetDataFn"
        >Ajax请求初始化表单</el-button
      >
      <el-button type="danger" @click="getFormModelFn"
        >获取表单Model对象</el-button
      >
    </el-row>
    <br />
    <form-create v-model="fApi" :rule="rule" :option="option"></form-create>

    <br />
    <!-- 自定义 确定和取消按钮 -->
    <div class="bottomButton">
      <el-button @click="submitButton" type="primary">自定义的确定</el-button>
      <el-button @click="reset">重置</el-button>
    </div>
    <el-button @click="addClass">测试表单</el-button>
  </section>
</template>
<script>
import { testCreateApi } from "@/api/form";
import editFrom from "../../components/from/from";
export default {
  data() {
    return {
      FromData: null,
      // 实例对象
      fApi: {},
      // 表单生成规则数组对象  生成规则：http://www.form-create.com/v2/guide/rule.html
      // 生成规则数组中一个对象就是一个表单项（是一个json对象），在里面可以对应的表单名称、类型、属性、值、样式、类名、是否必填、错误提示等。
      rule: [
        {
          type: "input", // 生成组件的名称(就是表单的名称：如input，radio，checkbox，select，slider等)
          field: "userName", // 表单组件的字段名称(就是表单的name属性，注：该必须唯一),自定义组件可以不配置
          className: "user-name-dom", // 设置组件的class属性
          title: "用户名称：", // 组件的名称, 选填
          value: "", // 表单组件的字段值(就是表单的value值),自定义组件可以不用设置
          props: {
            placeholder: "请输入用户名称！",
            disabled: false,
            readonly: false,
            clearable: true, // 是否显示清空按钮
          },
          validate: [
            {
              trigger: "blur",
              required: true,
              message: "用户名称不能为空！",
            },
          ],
          col: {
            md: { span: 12 }, // 支持每列布局
          },
        },

        {
          type: "input",
          field: "password",
          title: "用户密码：",
          value: "666",
          props: {
            // input的表单类型 <input type="">：注：有些表单类型form-create和element-ui专门做成了组件，可以在上面的type中直接用，所以下面有些类型如（radio）在这里会无效哦！！
            // text	默认。定义单行输入字段，用户可在其中输入文本。默认是 20 个字符。
            // button	定义可点击的按钮（大多与 JavaScript 使用来启动脚本）
            // checkbox	定义复选框。
            // color	定义拾色器。
            // date	定义日期字段（带有 calendar 控件）
            // datetime	定义日期字段（带有 calendar 和 time 控件）
            // datetime-local	定义日期字段（带有 calendar 和 time 控件）
            // month	定义日期字段的月（带有 calendar 控件）
            // week	定义日期字段的周（带有 calendar 控件）
            // time	定义日期字段的时、分、秒（带有 time 控件）
            // email	定义用于 e-mail 地址的文本字段
            // file	定义输入字段和 "浏览..." 按钮，供文件上传
            // hidden	定义隐藏输入字段
            // image	定义图像作为提交按钮
            // number	定义带有 spinner 控件的数字字段
            // password	定义密码字段。字段中的字符会被遮蔽。
            // radio	定义单选按钮。
            // range	定义带有 slider 控件的数字字段。
            // reset	定义重置按钮。重置按钮会将所有表单字段重置为初始值。
            // search	定义用于搜索的文本字段。
            // submit	定义提交按钮。提交按钮向服务器发送数据。
            // tel	定义用于电话号码的文本字段。
            // url	定义用于 URL 的文本字段。

            //  type: "password",
            placeholder: "请输入用户密码！",
          },
          validate: [
            {
              trigger: "blur",
              required: true,
              message: "用户密码不能为空！",
            },
          ],
          col: {
            md: { span: 12 },
          },
        },

        {
          type: "input",
          field: "summary",
          title: "个人简介：",
          value: "",
          props: {
            type: "textarea",
            rows: 3,
            placeholder: "请输入个人简介！",
          },
        },
        {
          type: "DatePicker", // 日期选择器
          field: "date",
          title: "活动日期",
          // value: [],
          props: {
            type: "date",
            format: "yyyy-MM-dd",
            placeholder: "请选择活动日期",
          },
        },

        {
          type: "radio",
          field: "sex",
          title: "性 别：",
          value: 0,
          options: [
            { label: "先 生", value: 1 },
            { label: "女 士", value: 2 },
            { label: "人 妖", value: 3, disabled: true },
            { label: "未 知", value: 0 },
          ],
        },

        {
          type: "checkbox",
          field: "hobby",
          title: "爱 好：",
          value: [1, 3],
          options: [
            { label: "吃喝", value: 1 },
            { label: "上班", value: 2, disabled: true },
            { label: "旅游", value: 3 },
            { label: "运动", value: 4 },
            { label: "学习", value: 5, disabled: true },
          ],
        },

        {
          type: "select",
          field: "address",
          title: "想去哪里：",
          value: 6,
          col: {
            //  sx: {span: 24},
            md: { span: 10 },
          },
          options: [
            { label: "内国走走", value: 1 },
            { label: "呆在公司", value: 2, disabled: true },
            { label: "非洲美洲", value: 3 },
            { label: "港澳台游", value: 4 },
            { label: "东南亚游", value: 5 },
            { label: "澳洲旅游", value: 6 },
            { label: "自驾游", value: 7 },
          ],
        },

        {
          type: "select",
          field: "address2",
          title: "想多选点：",
          value: [3, 5],
          col: {
            md: { span: 14 },
          },
          props: {
            multiple: true,
            placement: "bottom",
          },
          options: [
            { label: "内国走走", value: 1 },
            { label: "呆在公司", value: 2, disabled: true },
            { label: "非洲美洲", value: 3 },
            { label: "港澳台游", value: 4 },
            { label: "东南亚游", value: 5 },
            { label: "澳洲旅游", value: 6 },
            { label: "自驾游", value: 7 },
          ],
        },
      ],

      // 组件参数配置
      option: {
        // 显示重置表单按扭
        resetBtn: false,
        // 表单提交按扭事件
        submitBtn: {
          show: false,
          // 按钮内容
          innerText: "保存",
        },
        onSubmit: (formData) => {
          alert(JSON.stringify(formData));
          console.log("获取表单中的数据：", formData);

          //按钮进入提交状态
          //   this.fApi.btn.loading();

          //重置按钮禁用
          //   this.fApi.resetBtn.disabled();

          //按钮进入可点击状态
          //   this.fApi.btn.finish();
        },
      },
    };
  },
  methods: {
    // 提交
    submitButton() {
      this.fApi.submit((formData, fApi) => {
        alert(JSON.stringify(formData));
        console.log(formData, "999参数啊");
      });
    },
    // 添加
    addClass() {
      this.$modalForm(testCreateApi()).then(() => this.getList());
    },
    getList() {
      console.log("获取表单数据");
    },
    // 重置
    reset() {
      this.fApi.resetFields();
    },
    // 设置表单数据
    ajaxSetDataFn() {
      this.fApi.setValue({
        userName: "沐枫",
        password: "123456",
        summary: "我是请后端返回来的个人简介",
        sex: 1,
        hobby: [3, 4],
        address: 5,
        address2: [1, 4, 7],
        volume: 35,
        jiajie: 56,
        color: "#000DFF",
        date: "2020-02-01",
        rateNumber: 4,
        offon: false,
      });
    },

    //获取Form表单 model对象
    getFormModelFn() {
      console.log("Form表单 model对象：", this.fApi.model());
    },

    getUserNameChange(e) {
      this.$nextTick(() => {
        this.rule[2].value = this.rule[0].value;
      });
      console.log(this.fApi.getValue("userName"));
    },
  },
};
</script>
<style lang="scss">
.bottomButton {
  display: flex;
  justify-content: center; // flex-end
  align-items: center;
}
</style>
